<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- React 底层核心库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
    <!-- React 操作 Dom 库，类似 JQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">

        class Info extends React.Component {
            render() {
                return <div>
                    <h1>这是一个有状态组件</h1>
                    <h1>姓名: {this.props.name}</h1>
                    <h1>年龄: {this.props.age}</h1>
                    <h1>性别: {this.props.sex}</h1>
                </div>
            }
        }

        class App extends React.Component {
            // super 是吧属性传递给父级的构造类对象
            // 子类需要在 constructor 构造器里调用 super 方法，从而得到父类的 this 对象
            // super 加不加 props 的区别
            // 需要在构造器函数中使用 this.props 则需要 super 中传递。反之不需要
            constructor(props) {
                super(props);
                this.state = {
                    message: 'Hello Message'
                }
            }

            render() {
                return <div>
                    <Info name="刘军" age="25" sex="男"/>

                    {this.state.message}
                </div>
            }
        }

        ReactDOM.createRoot(document.querySelector('#root')).render(<App />)
    </script>
</body>

</html>